<template>
	<view class='marpadd' style="background: #F7F7F7;">
		<view style="height: 170rpx;background: #192033;">

		</view>
		<view class="d-j-around" style="margin-top: -20%;padding-bottom: 3%;">
			<view class="menu-b" v-for="(item,index) in menu" :key="index" style="text-align: center;"
				@click="changeBgColor(index)" :class="item.type==active?'active': ''">
				{{item.value}}
			</view>
		</view>
		<view>
			<view style="background: #fff;padding-top: 1%;padding-bottom: 5%;">
				<view class=" list-box df mar" style="width: 80%;padding: 0 5% 0 5%;margin-top: 10%;">
					<view class="d-a-center">
						<img :src="goalInfo.img" alt="" style="width: 134rpx;height: 134rpx;">
					</view>
					<view class=" d-a-center wrap-yuyue" style="padding: 5% 0 5% 5%;">
						<view class="value-t">
							{{goalInfo.value}}
						</view>
						<view class="value-l" >
							{{goalInfo.info}}
						</view>
					</view>

				</view>
				<view class="list-desc">
					{{goalInfo.desc}}
				</view>

			</view>

			<view class="d-j-center" v-if="!isVip">
				<view @click="payCard" class="btn-abc d-center" style="margin-top: 10%;margin-bottom: 20%;">
					{{isVipValue}}
				</view>
			</view>
			<view class="d-j-center" v-if=" isVip && !vipInfo.isGet  && active == 2">
				<view @click="handleInfoClick(goalInfo.type)"class="btn-abc d-center" style="margin-top: 10%;margin-bottom: 20%;">
					立即领取
				</view>
			</view>
			

		</view>

	</view>
</template>

<script>
	import uniPopup from '@/components/uni-ui/uni-popup/uni-popup.vue'
	import {
		selectNurseVipByNurseId
	} from '@/apis/nurse/index.js'
	export default {
		// import引入的组件需要注入到对象中才能使用
		components: {
			uniPopup,
		},
		data() {
			// 这里存放数据
			return {
				isVipValue: '开通会员',
				vipInfo: null,
				active: 0,
				isVip:	1,
				menu: [{
						value: '来单提示',
						type: 0,
					},
					{
						value: '佣金增加',
						type: 1,
					},
					{
						value: '实体物品',
						type: 2,

					},
					{
						value: '培训视频',
						type: 3,
					},
					{
						value: '商城优惠',
						type: 4,
					},
				],
				menuInfoList: [{
						type: 0,
						value: '订单优先通知',
						img: 'http://loto.oss-cn-shanghai.aliyuncs.com/email/188728edb6954edc.png',
						info: '小鹿会员享受所在地区订单优先短信通知',
						desc: '平台将通过短信或App系统消息，在新订单发布时优先向会员护士推送订单通知，优先时间为5分钟，即会员护士在此时间段内独享接单资格。需保持APP通知权限开启',
					}, {
						type: 1,
						value: '收入佣金增加',
						img: 'http://loto.oss-cn-shanghai.aliyuncs.com/email/e0bb6da567a24e52.png',
						info: '小鹿会员享受同样订单佣金收入增加5%',
						desc: '会员护士在完成平台订单后，系统将自动按原佣金比例上浮5%进行结算，例如基础佣金为70%，会员则按75%结算退单、取消订单不触发加成',
					},
					{
						type: 2,
						value: '护理包发放',
						img: 'http://loto.oss-cn-shanghai.aliyuncs.com/email/26d6e66260aa4a0d.png',
						info: '小鹿会员享受实体护理包发放',
						desc: '发放内容：包含定制护士服1套及护理工具包1份。工具包含赠送的通用耗材。发放流程：支付成功后7个工作日内安排发货，用户需在“商城-我的地址”中填写准确收货信息。若未及时填写地址，可能影响发货时间。地址失效或拒收视为自动放弃',
					},
					{
						type: 3,
						value: '观看专业培训视频',
						img: 'http://loto.oss-cn-shanghai.aliyuncs.com/email/6f5a3696048f43f3.png',
						info: '小鹿会员可在专业视频培训页面查看专业视频',
						desc: '会员期内护士可不限次数、不限时长观看平台护理相关培训视频，包括但不限于实操教学、医护沟通技巧、法律合规培训等。禁止录屏/传播课程内容',
					},
					{
						type: 4,
						value: '商城购买商品折扣价',
						img: 'http://loto.oss-cn-shanghai.aliyuncs.com/email/188728edb6954edc.png',
						info: '小鹿会员享受商城购买全部上品9折',
						desc: '会员期内，在平台官方商城中购买医用耗材类商品可享受统一9折优惠（即商品标价基础上9折结算）。',
					},
				],
				goalInfo: {},
			}
		},
		// 监听属性 类似于data概念
		computed: {},
		// 监控data中的数据变化
		watch: {},
		// 生命周期 - 创建完成（可以访问当前this实例）
		onLoad(options) {
			console.log(options)

			this.changeBgColor(options.type)
		},
		// 生命周期 - 页面展示（不可以访问DOM元素）
		onShow() {
			this.selectNurseVipByNurseId()	
		},
		// 生命周期 - 挂载完成（可以访问DOM元素）
		onReady() {},
		// 方法集合
		methods: {
			selectNurseVipByNurseId() {
				let obj = {
					nurseId: this.$store.state.userInfo.id
				}
				selectNurseVipByNurseId(obj).then(res=>{
					console.log("会员信息",res.object)
					this.vipInfo = res.object
					this.isVip = res.object ? 1: 0
					if (options.isVip == 1) {
						this.isVip = options.isVip
						this.isVipValue = '续费会员'
					} else {
						this.isVipValue = '开通会员'
					}
				})
			},

			handleInfoClick(type) {
			    // 示例：当 type=2（实体物品）时跳转到指定页面
			    if (type === 2 ){
			      uni.navigateTo({
			        url: `/pages/purchase/purchaseCommission?id=${this.vipInfo.id}`, // 目标页面路径
			      });
			    } else {
			      // 可扩展其他 type 的跳转逻辑
			      uni.showToast({
			        title: '该类型暂未开放跳转',
			        icon: 'none',
			      });
			    }
			  },
			payCard() {
				console.log("触发")
				uni.navigateBack()
			},
			changeBgColor(index) {
				this.active = index
				this.init(index)
			},
			init(type) {
				this.goalInfo = this.menuInfoList.filter((i) => {
					return i.type == type
				})
				this.goalInfo = this.goalInfo[0]
				console.log('goalInfo', this.goalInfo)
			},
			
			
			handleMarks() {
				this.$refs.popupmark.open()
			},
			
		},
	}
</script>
<style lang='less' scoped>
	.list-desc {
		display: flex;
		margin: 0 5% 0 5%;
		margin-top: 26rpx;
		margin-bottom: 40rpx;
		width: 670rpx;
		min-height: 660rpx;
		background: #f7f7f7;
		border-radius: 20rpx;
		padding: 24rpx;
		box-sizing: border-box;
	}

	.wrap-yuyue {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.list-box {
		width: 670rpx;
		height: 200rpx;
		background: #f7f7f7;
		border-radius: 20rpx;
	}

	.value-t {
		font-size: 32rpx;
		font-weight: 500;
		color: #000000;
		padding-top: 7rpx;
		padding-bottom: 5rpx;
	}

	.value-l {
		font-size: 24rpx;
		font-weight: 400;
		}
	


	.btn-ac {
		width: 364rpx;
		height: 80rpx;
		background: linear-gradient(90deg, #ffe4be 0%, #f0bb75 100%);
		border-radius: 40rpx;
		font-size: 36rpx;
		font-weight: 500;
		color: #894200;
	}

	.btn-abc {
		// margin-top: 50%;
		width: 670rpx;
		height: 100rpx;
		background: linear-gradient(90deg, #ffe4be 0%, #f0bb75 100%);
		border-radius: 52rpx;
		font-size: 36rpx;
		font-weight: 500;
		color: #894200;
	}

	.menu-b {
		width: 25%;
		height: 44rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(241, 215, 188, 0.6);
		line-height: 44rpx;
	}

	.ll {
		border: 2rpx solid blue;
	}

	.active {
		color: #81d3f8;
		height: 44rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #edd8bf;
		line-height: 44rpx;
		border-bottom: 4rpx solid #f1d7bc;
		padding-bottom: 6rpx;
		width: 23%;
	}

	.uni-popup {
		z-index: 999;
	}

	.marks {
		position: relative;
		padding: 60rpx 0rpx 80rpx;
		width: 100%;
		background-color: #fff;
		border-radius: 32rpx 32rpx 0 0;
		box-sizing: border-box;
		z-index: 999;

		.cancel {
			font-size: 46rpx;
			position: absolute;
			top: 20rpx;
			right: 40rpx;
		}

		.font_num {
			position: absolute;
			bottom: 230rpx;
			right: 60rpx;
		}

		.title {
			position: relative;
			top: -14rpx;
			font-size: 32rpx;
		}

		.cont {
			color: #3c8eff;
			margin: 26rpx 0;
		}

		textarea {
			width: 670rpx !important;
			padding: 24rpx 34rpx;
			font-size: 28rpx;
			color: rgba(51, 51, 51, 1);
			background-color: rgba(246, 246, 246, 1);
			box-sizing: border-box;
			border-radius: 16rpx;
		}

		button {
			width: 90%;
			height: 90rpx;
			margin-top: 60rpx;
		}
	}
</style>